<script lang="ts" setup>
import { computed, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Card,
  Checkbox,
  Col,
  message,
  Modal,
  Radio,
  Row,
  Space,
  Statistic,
  Table,
  Tag,
} from 'ant-design-vue';
import { RangePicker } from 'ant-design-vue/es/date-picker/index';
import dayjs from 'dayjs';
import isBetween from 'dayjs/plugin/isBetween';

dayjs.extend(isBetween);

const sortType = ref('room');
const dateRange = ref([dayjs().startOf('month'), dayjs().endOf('month')]);
const showRoomPrice = ref(true);
const showRevenue = ref(true);
const showTrends = ref(true);

// 房型数据
const roomTypes = ref([
  {
    id: '1',
    name: '炼丹房',
    totalRooms: 1,
    basePrice: 888,
    trend: 'up',
    trendRate: 12,
  },
  {
    id: '2',
    name: '标准双床房',
    totalRooms: 50,
    basePrice: 299,
    trend: 'up',
    trendRate: 8,
  },
  {
    id: '3',
    name: '总统房',
    totalRooms: 2,
    basePrice: 1888,
    trend: 'down',
    trendRate: 5,
  },
]);

// 房间数据
const rooms = ref([
  {
    id: '1',
    roomType: '标准双床房',
    roomNumber: 'b5s',
    status: {
      '2025-08-17': { available: 0, occupied: 1, booked: 0, maintenance: 0 },
      '2025-08-18': { available: 0, occupied: 1, booked: 0, maintenance: 0 },
      '2025-08-19': { available: 0, occupied: 1, booked: 0, maintenance: 0 },
    },
    occupiedInfo: {
      '2025-08-17': {
        guestName: '张三',
        checkInTime: '2025-08-17 14:30:00',
        checkOutTime: '2025-08-20 12:00:00',
      },
    },
  },
  {
    id: '2',
    roomType: '标准双床房',
    roomNumber: 'b7s',
    status: {
      '2025-08-17': { available: 0, occupied: 0, booked: 1, maintenance: 0 },
      '2025-08-18': { available: 0, occupied: 0, booked: 1, maintenance: 0 },
      '2025-08-19': { available: 0, occupied: 0, booked: 1, maintenance: 0 },
    },
    bookingInfo: {
      '2025-08-17': {
        guestName: '李四',
        bookingTime: '2025-08-15 10:30:00',
        checkInDate: '2025-08-17',
        bookingStatus: '已确认',
      },
    },
  },
  {
    id: '3',
    roomType: '总统房',
    roomNumber: 'H39',
    status: {
      '2025-08-17': { available: 0, occupied: 0, booked: 0, maintenance: 1 },
      '2025-08-18': { available: 0, occupied: 0, booked: 0, maintenance: 1 },
      '2025-08-19': { available: 0, occupied: 0, booked: 0, maintenance: 1 },
    },
    maintenanceInfo: {
      '2025-08-17': {
        maintenanceType: '设备维修',
        startTime: '2025-08-17 09:00:00',
        endTime: '2025-08-25 18:00:00',
        reason: '空调故障',
      },
    },
  },
]);

const dateList = computed(() => {
  return ['2025-08-17', '2025-08-18', '2025-08-19'];
});

// 移除未使用的测试函数

// 预订房间
const handleBookRoom = (room: any, date: string) => {
  message.info(`预订房间: ${room.roomNumber} - ${date}`);
};

// 续住操作
const handleExtendStay = (room: any, date: string) => {
  message.info(`续住操作: ${room.roomNumber} - ${date}`);

  Modal.confirm({
    title: '续住确认',
    content: `确定要为房间 ${room.roomNumber} 办理续住吗？`,
    onOk() {
      // 更新房态数据 - 延长在住时间
      const nextDate = dayjs(date).add(1, 'day').format('YYYY-MM-DD');
      if (room.occupiedInfo?.[date]) {
        room.occupiedInfo[nextDate] = {
          ...room.occupiedInfo[date],
          checkOutTime: dayjs(room.occupiedInfo[date].checkOutTime)
            .add(1, 'day')
            .format('YYYY-MM-DD HH:mm:ss'),
        };

        room.status[nextDate] = {
          available: 0,
          occupied: 1,
          booked: 0,
          maintenance: 0,
        };

        message.success('续住操作已执行，房间状态已更新');
      }
    },
  });
};

// 提前离店操作
const handleEarlyCheckOut = (room: any, date: string) => {
  message.info(`提前离店: ${room.roomNumber} - ${date}`);

  Modal.confirm({
    title: '提前离店确认',
    content: `确定要为房间 ${room.roomNumber} 办理提前离店吗？`,
    onOk() {
      // 更新房态数据 - 将房间状态改为可售
      if (room.status?.[date]) {
        room.status[date] = {
          available: 1,
          occupied: 0,
          booked: 0,
          maintenance: 0,
        };

        // 清除在住信息
        if (room.occupiedInfo?.[date]) {
          delete room.occupiedInfo[date];
        }

        message.success('提前离店操作已执行，房间已恢复可售状态');
      }
    },
  });
};

// 取消预订
const handleCancelBooking = (room: any, date: string) => {
  message.info(`取消预订: ${room.roomNumber} - ${date}`);

  Modal.confirm({
    title: '取消预订确认',
    content: `确定要取消房间 ${room.roomNumber} 的预订吗？`,
    onOk() {
      // 更新房态数据 - 将房间状态改为可售
      if (room.status?.[date]) {
        room.status[date] = {
          available: 1,
          occupied: 0,
          booked: 0,
          maintenance: 0,
        };

        // 清除预订信息
        if (room.bookingInfo?.[date]) {
          delete room.bookingInfo[date];
        }

        message.success('预订已取消，房间已恢复可售状态');
        console.log('取消预订后房间状态:', room.status);
      }
    },
  });
};

// 完成维修
const handleCompleteMaintenance = (room: any, date: string) => {
  message.info(`完成维修: ${room.roomNumber} - ${date}`);

  Modal.confirm({
    title: '完成维修确认',
    content: `确定要标记房间 ${room.roomNumber} 维修完成吗？`,
    onOk() {
      // 更新房态数据 - 将房间状态改为可售
      if (room.status?.[date]) {
        room.status[date] = {
          available: 1,
          occupied: 0,
          booked: 0,
          maintenance: 0,
        };

        // 清除维修信息
        if (room.maintenanceInfo?.[date]) {
          delete room.maintenanceInfo[date];
        }

        message.success('维修已完成，房间已恢复可售状态');
        console.log('完成维修后房间状态:', room.status);
      }
    },
  });
};

// 延长维修
const handleExtendMaintenance = (room: any, date: string) => {
  message.info(`延长维修: ${room.roomNumber} - ${date}`);

  Modal.confirm({
    title: '延长维修确认',
    content: `确定要延长房间 ${room.roomNumber} 的维修时间吗？`,
    onOk() {
      // 更新房态数据 - 延长维修时间
      const nextDate = dayjs(date).add(1, 'day').format('YYYY-MM-DD');
      if (room.maintenanceInfo?.[date]) {
        room.maintenanceInfo[nextDate] = {
          ...room.maintenanceInfo[date],
          endTime: dayjs(room.maintenanceInfo[date].endTime)
            .add(1, 'day')
            .format('YYYY-MM-DD HH:mm:ss'),
        };

        room.status[nextDate] = {
          available: 0,
          occupied: 0,
          booked: 0,
          maintenance: 1,
        };

        message.success('维修时间已延长，房间状态已更新');
        console.log('延长维修后房间状态:', room.status);
      }
    },
  });
};

// 智能推荐
const smartRecommendations = ref([
  {
    id: '1',
    icon: 'ant-design:fire-outlined',
    title: '高入住率房型',
    description: '预测未来一周入住率较高的房型，提前调整价格和维护计划。',
  },
  {
    id: '2',
    icon: 'ant-design:line-chart-outlined',
    title: '收益预测',
    description: '基于历史数据和市场趋势，预测未来收益情况。',
  },
  {
    id: '3',
    icon: 'ant-design:warning-outlined',
    title: '异常房态',
    description: '识别可能存在问题的房态，及时处理。',
  },
]);

const handleRecommendation = (rec: any) => {
  message.info(`点击了智能推荐: ${rec.title}`);
};

const handleBatchBooking = () => {
  message.info('执行批量预订操作');
};

const handleBatchPricing = () => {
  message.info('执行批量调价操作');
};

const handleBatchMaintenance = () => {
  message.info('执行批量维修操作');
};

const handleExportData = () => {
  message.info('导出数据');
};

const handleDateChange = (dates: any) => {
  dateRange.value = dates;
  message.info(
    `日期范围已更改: ${dates[0].format('YYYY-MM-DD')} 至 ${dates[1].format('YYYY-MM-DD')}`,
  );
};

const dateFormat = 'YYYY-MM-DD';

// 计算属性
const todayAvailableRooms = computed(() => {
  const today = dayjs().format('YYYY-MM-DD');
  return rooms.value.reduce((total, room) => {
    return total + (room.status[today]?.available || 0);
  }, 0);
});

const expectedOccupancyRate = computed(() => {
  const totalRooms = rooms.value.length;
  const occupiedRooms = rooms.value.reduce((total, room) => {
    const today = dayjs().format('YYYY-MM-DD');
    return total + (room.status[today]?.occupied || 0);
  }, 0);
  return Math.round((occupiedRooms / totalRooms) * 100);
});

const expectedRevenue = computed(() => {
  const today = dayjs().format('YYYY-MM-DD');
  return rooms.value.reduce((total, room) => {
    return total + (room.status[today]?.revenue || 0);
  }, 0);
});

const popularRoomType = computed(() => {
  const roomTypeCounts: { [key: string]: number } = {};
  rooms.value.forEach((room) => {
    roomTypeCounts[room.roomType] = (roomTypeCounts[room.roomType] || 0) + 1;
  });
  return Object.keys(roomTypeCounts).reduce((a, b) =>
    roomTypeCounts[a] > roomTypeCounts[b] ? a : b,
  );
});

const tableColumns = computed(() => {
  if (sortType.value === 'roomType') {
    return [
      {
        title: '房型',
        key: 'roomType',
        fixed: 'left' as const,
        width: 150,
      },
      ...dateList.value.map((date) => ({
        title: date,
        key: `date_${date}`,
        width: 120,
        children: [
          { title: '可售', key: 'available', width: 60 },
          { title: '在住', key: 'occupied', width: 60 },
          { title: '预订', key: 'booked', width: 60 },
          { title: '维修', key: 'maintenance', width: 60 },
        ],
      })),
    ];
  } else if (sortType.value === 'date') {
    return [
      {
        title: '日期',
        key: 'date',
        fixed: 'left' as const,
        width: 120,
      },
      ...roomTypes.value.map((type) => ({
        title: type.name,
        key: `room_${type.id}`,
        width: 120,
        children: [
          { title: '可售', key: 'available', width: 60 },
          { title: '在住', key: 'occupied', width: 60 },
          { title: '预订', key: 'booked', width: 60 },
          { title: '维修', key: 'maintenance', width: 60 },
        ],
      })),
    ];
  } else {
    return [
      {
        title: '房间号',
        key: 'roomNumber',
        fixed: 'left' as const,
        width: 120,
      },
      ...dateList.value.map((date) => ({
        title: date,
        key: `date_${date}`,
        width: 120,
        children: [
          { title: '可售', key: 'available', width: 60 },
          { title: '在住', key: 'occupied', width: 60 },
          { title: '预订', key: 'booked', width: 60 },
          { title: '维修', key: 'maintenance', width: 60 },
        ],
      })),
    ];
  }
});

const tableData = computed(() => {
  if (sortType.value === 'roomType') {
    return roomTypes.value.map((type) => ({
      key: type.id,
      roomType: type.name,
      totalRooms: type.totalRooms,
      trend: type.trend,
      trendRate: type.trendRate,
      ...dateList.value.reduce((acc, date) => {
        acc[`date_${date}`] = {
          available: rooms.value
            .filter((r) => r.roomType === type.name)
            .reduce(
              (sum, room) => sum + (room.status[date]?.available || 0),
              0,
            ),
          occupied: rooms.value
            .filter((r) => r.roomType === type.name)
            .reduce((sum, room) => sum + (room.status[date]?.occupied || 0), 0),
          booked: rooms.value
            .filter((r) => r.roomType === type.name)
            .reduce((sum, room) => sum + (room.status[date]?.booked || 0), 0),
          maintenance: rooms.value
            .filter((r) => r.roomType === type.name)
            .reduce(
              (sum, room) => sum + (room.status[date]?.maintenance || 0),
              0,
            ),
        };
        return acc;
      }, {}),
    }));
  } else if (sortType.value === 'date') {
    return dateList.value.map((date) => ({
      key: date,
      date,
      isWeekend: dayjs(date).day() === 0 || dayjs(date).day() === 6,
      ...roomTypes.value.reduce((acc, type) => {
        acc[`room_${type.id}`] = {
          available: rooms.value
            .filter((r) => r.roomType === type.name)
            .reduce(
              (sum, room) => sum + (room.status[date]?.available || 0),
              0,
            ),
          occupied: rooms.value
            .filter((r) => r.roomType === type.name)
            .reduce((sum, room) => sum + (room.status[date]?.occupied || 0), 0),
          booked: rooms.value
            .filter((r) => r.roomType === type.name)
            .reduce((sum, room) => sum + (room.status[date]?.booked || 0), 0),
          maintenance: rooms.value
            .filter((r) => r.roomType === type.name)
            .reduce(
              (sum, room) => sum + (room.status[date]?.maintenance || 0),
              0,
            ),
        };
        return acc;
      }, {}),
    }));
  } else {
    return rooms.value.map((room) => ({
      key: room.id,
      roomType: room.roomType,
      roomNumber: room.roomNumber,
      roomLevel: room.roomLevel || '标准',
      ...dateList.value.reduce((acc, date) => {
        acc[`date_${date}`] = room.status[date] || {
          available: 0,
          occupied: 0,
          booked: 0,
          maintenance: 0,
        };
        return acc;
      }, {}),
    }));
  }
});

const getRoomStatus = (record: any, columnKey: string, statusType: string) => {
  return record[columnKey]?.[statusType] || 0;
};

const getRoomPrice = (record: any, columnKey: string) => {
  // Placeholder for actual price logic
  return 200;
};

const getRoomRevenue = (record: any, columnKey: string) => {
  // Placeholder for actual revenue logic
  return 200;
};

const getGuestInfo = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.occupiedInfo?.[dateKey]?.guestName || '未知';
};

const getCheckInTime = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.occupiedInfo?.[dateKey]?.checkInTime || 'N/A';
};

const getCheckOutTime = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.occupiedInfo?.[dateKey]?.checkOutTime || 'N/A';
};

const getBookingGuestInfo = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.bookingInfo?.[dateKey]?.guestName || '未知';
};

const getBookingTime = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.bookingInfo?.[dateKey]?.bookingTime || 'N/A';
};

const getBookingCheckIn = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.bookingInfo?.[dateKey]?.checkInDate || 'N/A';
};

const getBookingStatus = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.bookingInfo?.[dateKey]?.bookingStatus || 'N/A';
};

const getMaintenanceType = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.maintenanceInfo?.[dateKey]?.maintenanceType || 'N/A';
};

const getMaintenanceStartTime = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.maintenanceInfo?.[dateKey]?.startTime || 'N/A';
};

const getMaintenanceEndTime = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.maintenanceInfo?.[dateKey]?.endTime || 'N/A';
};

const getMaintenanceReason = (record: any, columnKey: string) => {
  const dateKey = columnKey.replace('date_', '');
  const room = rooms.value.find((r) => r.roomNumber === record.roomNumber);
  return room?.maintenanceInfo?.[dateKey]?.reason || 'N/A';
};

const getRoomLevelColor = (level: string) => {
  switch (level) {
    case '标准': {
      return 'blue';
    }
    case '行政': {
      return 'purple';
    }
    case '豪华': {
      return 'gold';
    }
    default: {
      return 'default';
    }
  }
};

const handleViewRoomDetail = (record: any, date: string) => {
  message.info(`查看房间详情: ${record.roomNumber} - ${date}`);
};

const handleViewOccupiedDetail = (record: any, date: string) => {
  message.info(`查看在住详情: ${record.roomNumber} - ${date}`);
};

const handleViewBookingDetail = (record: any, date: string) => {
  message.info(`查看预订详情: ${record.roomNumber} - ${date}`);
};

const handleModifyBooking = (record: any, date: string) => {
  message.info(`修改预订: ${record.roomNumber} - ${date}`);
};

const handleViewMaintenanceDetail = (record: any, date: string) => {
  message.info(`查看维修详情: ${record.roomNumber} - ${date}`);
};
</script>

<template>
  <div class="future-room-status">
    <!-- 统计信息头部 -->
    <div class="statistics-header">
      <Row :gutter="16">
        <Col :span="6">
          <Card class="stat-card">
            <Statistic
              title="今日可售房"
              :value="todayAvailableRooms"
              :value-style="{ color: '#52c41a' }"
              prefix="间"
            />
          </Card>
        </Col>
        <Col :span="6">
          <Card class="stat-card">
            <Statistic
              title="预计入住率"
              :value="expectedOccupancyRate"
              :value-style="{ color: '#1890ff' }"
              suffix="%"
            />
          </Card>
        </Col>
        <Col :span="6">
          <Card class="stat-card">
            <Statistic
              title="预计收益"
              :value="expectedRevenue"
              :value-style="{ color: '#faad14' }"
              prefix="¥"
            />
          </Card>
        </Col>
        <Col :span="6">
          <Card class="stat-card">
            <Statistic
              title="热门房型"
              :value="popularRoomType"
              :value-style="{ color: '#722ed1' }"
            />
          </Card>
        </Col>
      </Row>
    </div>

    <!-- 控制面板 -->
    <Card class="control-panel" title="房态管理">
      <Row :gutter="16">
        <Col :span="8">
          <div class="control-group">
            <label>排序方式</label>
            <Radio.Group v-model="sortType" button-style="solid">
              <Radio.Button value="roomType">房型排序</Radio.Button>
              <Radio.Button value="date">日期排序</Radio.Button>
              <Radio.Button value="room">房间排序</Radio.Button>
            </Radio.Group>
          </div>
        </Col>
        <Col :span="8">
          <div class="control-group">
            <label>日期范围</label>
            <RangePicker
              v-model="dateRange"
              :format="dateFormat"
              @change="handleDateChange"
            />
          </div>
        </Col>
        <Col :span="8">
          <div class="control-group">
            <label>显示选项</label>
            <Space>
              <Checkbox v-model="showRoomPrice">显示房价</Checkbox>
              <Checkbox v-model="showRevenue">显示收益</Checkbox>
              <Checkbox v-model="showTrends">显示趋势</Checkbox>
            </Space>
          </div>
        </Col>
      </Row>

      <!-- 智能推荐和批量操作 -->
      <div class="control-panel-advanced">
        <Row :gutter="16">
          <Col :span="12">
            <Card class="smart-recommendations" title="智能推荐" size="small">
              <div class="recommendation-cards">
                <div
                  v-for="rec in smartRecommendations"
                  :key="rec.id"
                  class="rec-card"
                  @click="handleRecommendation(rec)"
                >
                  <div class="rec-content">
                    <div class="rec-icon">
                      <IconifyIcon :icon="rec.icon" />
                    </div>
                    <div class="rec-info">
                      <div class="rec-title">{{ rec.title }}</div>
                      <div class="rec-desc">{{ rec.description }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </Col>
          <Col :span="12">
            <Card class="batch-operations" title="批量操作" size="small">
              <Space direction="vertical" style="width: 100%">
                <Button type="primary" block @click="handleBatchBooking">
                  <IconifyIcon icon="ant-design:plus-outlined" />
                  批量预订
                </Button>
                <Button block @click="handleBatchPricing">
                  <IconifyIcon icon="ant-design:dollar-outlined" />
                  批量调价
                </Button>
                <Button block @click="handleBatchMaintenance">
                  <IconifyIcon icon="ant-design:tool-outlined" />
                  批量维修
                </Button>
                <Button block @click="handleExportData">
                  <IconifyIcon icon="ant-design:export-outlined" />
                  导出数据
                </Button>
              </Space>
            </Card>
          </Col>
        </Row>
      </div>
    </Card>

    <!-- 房态表格 -->
    <Card class="room-status-table" title="房态详情">
      <div class="table-container">
        <Table
          :columns="tableColumns"
          :data-source="tableData"
          :pagination="false"
          :scroll="{ x: 'max-content' }"
          size="small"
          bordered
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'roomType'">
              <div class="room-type-cell">
                <span class="room-type-name">{{ record.roomType }}</span>
                <span v-if="record.totalRooms" class="room-count"
                  >[{{ record.totalRooms }}]</span
                >
                <div v-if="showTrends && record.trend" class="trend-indicator">
                  <IconifyIcon
                    :icon="
                      record.trend === 'up'
                        ? 'ant-design:rise-outlined'
                        : 'ant-design:fall-outlined'
                    "
                    :class="record.trend === 'up' ? 'trend-up' : 'trend-down'"
                  />
                  <span>{{ record.trendRate }}%</span>
                </div>
              </div>
            </template>
            <template v-else-if="column.key === 'roomNumber'">
              <div class="room-number-cell">
                <span class="room-number">{{ record.roomNumber }}</span>
                <div v-if="record.roomLevel" class="room-level">
                  <Tag :color="getRoomLevelColor(record.roomLevel)">
                    {{ record.roomLevel }}
                  </Tag>
                </div>
              </div>
            </template>
            <template v-else-if="column.key === 'date'">
              <div class="date-cell">
                <span class="date-text">{{ record.date }}</span>
                <div v-if="record.isWeekend" class="weekend-indicator">
                  <Tag color="orange">周末</Tag>
                </div>
              </div>
            </template>
            <template
              v-else-if="
                column.key.startsWith('date_') || column.key.startsWith('room_')
              "
            >
              <div class="status-cell">
                <div class="status-row">
                  <span class="status-label">可售:</span>
                  <span class="status-value available">{{
                    getRoomStatus(record, column.key, 'available')
                  }}</span>
                </div>
                <div class="status-row">
                  <span class="status-label">在住:</span>
                  <span class="status-value occupied">{{
                    getRoomStatus(record, column.key, 'occupied')
                  }}</span>
                </div>
                <div class="status-row">
                  <span class="status-label">预订:</span>
                  <span class="status-value booked">{{
                    getRoomStatus(record, column.key, 'booked')
                  }}</span>
                </div>
                <div class="status-row">
                  <span class="status-label">维修:</span>
                  <span class="status-value maintenance">{{
                    getRoomStatus(record, column.key, 'maintenance')
                  }}</span>
                </div>

                <!-- 房价和收益信息 -->
                <div v-if="showRoomPrice" class="price-info">
                  <div class="price-row">
                    <span class="price-label">房价:</span>
                    <span class="price-value"
                      >¥{{ getRoomPrice(record, column.key) }}</span
                    >
                  </div>
                </div>

                <div v-if="showRevenue" class="revenue-info">
                  <div class="revenue-row">
                    <span class="revenue-label">收益:</span>
                    <span class="revenue-value"
                      >¥{{ getRoomRevenue(record, column.key) }}</span
                    >
                  </div>
                </div>

                <!-- 房间排序模式下的状态详情和操作 -->
                <div v-if="sortType === 'room'" class="status-details">
                  <!-- 可售状态详情 -->
                  <div
                    v-if="getRoomStatus(record, column.key, 'available') > 0"
                    class="available-details"
                  >
                    <div class="status-info">
                      <Tag color="green">可售</Tag>
                      <span class="status-time">可立即预订</span>
                    </div>
                    <div class="action-buttons">
                      <Button
                        type="primary"
                        size="small"
                        @click="handleBookRoom(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:plus-outlined" />
                        预订
                      </Button>
                      <Button
                        size="small"
                        @click="handleViewRoomDetail(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:eye-outlined" />
                        查看
                      </Button>
                    </div>
                  </div>

                  <!-- 在住状态详情 -->
                  <div
                    v-else-if="
                      getRoomStatus(record, column.key, 'occupied') > 0
                    "
                    class="occupied-details"
                  >
                    <div class="status-info">
                      <Tag color="blue">在住</Tag>
                      <span class="guest-info">{{
                        getGuestInfo(record, column.key)
                      }}</span>
                    </div>
                    <div class="occupancy-info">
                      <div class="info-row">
                        <span class="info-label">入住时间:</span>
                        <span class="info-value">{{
                          getCheckInTime(record, column.key)
                        }}</span>
                      </div>
                      <div class="info-row">
                        <span class="info-label">预计离店:</span>
                        <span class="info-value">{{
                          getCheckOutTime(record, column.key)
                        }}</span>
                      </div>
                    </div>
                    <div class="action-buttons">
                      <Button
                        type="primary"
                        size="small"
                        class="occupied-btn"
                        @click="handleViewOccupiedDetail(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:user-outlined" />
                        在住详情
                      </Button>
                      <Button
                        size="small"
                        @click="handleExtendStay(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:clock-circle-outlined" />
                        续住
                      </Button>
                      <Button
                        size="small"
                        @click="handleEarlyCheckOut(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:logout-outlined" />
                        提前离店
                      </Button>
                    </div>
                  </div>

                  <!-- 预订状态详情 -->
                  <div
                    v-else-if="getRoomStatus(record, column.key, 'booked') > 0"
                    class="booked-details"
                  >
                    <div class="status-info">
                      <Tag color="orange">已预订</Tag>
                      <span class="guest-info">{{
                        getBookingGuestInfo(record, column.key)
                      }}</span>
                    </div>
                    <div class="booking-info">
                      <div class="info-row">
                        <span class="info-label">预订时间:</span>
                        <span class="info-value">{{
                          getBookingTime(record, column.key)
                        }}</span>
                      </div>
                      <div class="info-row">
                        <span class="info-label">入住日期:</span>
                        <span class="info-value">{{
                          getBookingCheckIn(record, column.key)
                        }}</span>
                      </div>
                      <div class="info-row">
                        <span class="info-label">预订状态:</span>
                        <span class="info-value">{{
                          getBookingStatus(record, column.key)
                        }}</span>
                      </div>
                    </div>
                    <div class="action-buttons">
                      <Button
                        type="primary"
                        size="small"
                        class="booking-btn"
                        @click="handleViewBookingDetail(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:file-text-outlined" />
                        预订详情
                      </Button>
                      <Button
                        size="small"
                        @click="handleModifyBooking(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:edit-outlined" />
                        修改
                      </Button>
                      <Button
                        size="small"
                        @click="handleCancelBooking(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:close-outlined" />
                        取消
                      </Button>
                    </div>
                  </div>

                  <!-- 维修状态详情 -->
                  <div
                    v-else-if="
                      getRoomStatus(record, column.key, 'maintenance') > 0
                    "
                    class="maintenance-details"
                  >
                    <div class="status-info">
                      <Tag color="red">维修中</Tag>
                      <span class="maintenance-type">{{
                        getMaintenanceType(record, column.key)
                      }}</span>
                    </div>
                    <div class="maintenance-info">
                      <div class="info-row">
                        <span class="info-label">开始时间:</span>
                        <span class="info-value">{{
                          getMaintenanceStartTime(record, column.key)
                        }}</span>
                      </div>
                      <div class="info-row">
                        <span class="info-label">预计完成:</span>
                        <span class="info-value">{{
                          getMaintenanceEndTime(record, column.key)
                        }}</span>
                      </div>
                      <div class="info-row">
                        <span class="info-label">维修原因:</span>
                        <span class="info-value">{{
                          getMaintenanceReason(record, column.key)
                        }}</span>
                      </div>
                    </div>
                    <div class="action-buttons">
                      <Button
                        type="primary"
                        size="small"
                        class="maintenance-btn"
                        @click="handleViewMaintenanceDetail(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:tool-outlined" />
                        维修详情
                      </Button>
                      <Button
                        size="small"
                        @click="handleCompleteMaintenance(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:check-outlined" />
                        完成维修
                      </Button>
                      <Button
                        size="small"
                        @click="handleExtendMaintenance(record, column.key)"
                      >
                        <IconifyIcon icon="ant-design:clock-circle-outlined" />
                        延长维修
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </template>
        </Table>
      </div>
    </Card>
  </div>
</template>

<style scoped>
.future-room-status {
  padding: 16px;
}

.statistics-header {
  margin-bottom: 20px;
}

.stat-card {
  height: 100px;
}

.control-panel {
  margin-bottom: 20px;
}

.control-group {
  margin-bottom: 10px;
}

.control-group label {
  margin-right: 10px;
}

.control-panel-advanced {
  margin-top: 20px;
}

.smart-recommendations {
  margin-bottom: 10px;
}

.recommendation-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rec-card {
  flex: 1;
  min-width: 200px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.rec-card:hover {
  background-color: #f0f0f0;
}

.rec-content {
  display: flex;
  align-items: center;
}

.rec-icon {
  margin-right: 10px;
  font-size: 24px;
  color: #1890ff;
}

.rec-info {
  flex-grow: 1;
}

.rec-title {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: bold;
}

.rec-desc {
  font-size: 12px;
  color: #555;
}

.batch-operations {
  margin-bottom: 10px;
}

.room-status-table {
  margin-top: 20px;
}

.table-container {
  overflow-x: auto;
}

.room-type-cell {
  display: flex;
  align-items: center;
}

.room-type-name {
  margin-right: 8px;
  font-weight: bold;
}

.room-count {
  font-size: 12px;
  color: #888;
}

.trend-indicator {
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: #555;
}

.trend-up {
  color: #52c41a;
}

.trend-down {
  color: #ff4d4f;
}

.room-number-cell {
  display: flex;
  align-items: center;
}

.room-number {
  margin-right: 8px;
  font-weight: bold;
}

.room-level {
  margin-left: 8px;
}

.date-cell {
  display: flex;
  align-items: center;
}

.date-text {
  margin-right: 8px;
  font-weight: bold;
}

.weekend-indicator {
  margin-left: 8px;
}

.status-cell {
  padding: 4px 0;
}

.status-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.status-label {
  font-weight: bold;
  color: #555;
}

.status-value {
  font-weight: bold;
}

.available {
  color: #52c41a;
}

.occupied {
  color: #1890ff;
}

.booked {
  color: #faad14;
}

.maintenance {
  color: #ff4d4f;
}

.price-info,
.revenue-info {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed #eee;
}

.price-row,
.revenue-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.price-label,
.revenue-label {
  font-weight: bold;
  color: #555;
}

.status-details {
  margin-top: 10px;
}

.available-details,
.occupied-details,
.booked-details,
.maintenance-details {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.status-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.status-time {
  margin-left: 8px;
  font-size: 12px;
  color: #888;
}

.guest-info {
  margin-left: 8px;
  font-size: 12px;
  color: #1890ff;
}

.occupancy-info,
.booking-info,
.maintenance-info {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed #eee;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.info-label {
  font-weight: bold;
  color: #555;
}

.info-value {
  font-weight: bold;
}

.action-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.occupied-btn,
.booking-btn,
.maintenance-btn {
  flex: 1;
}
</style>
